<ui:composition
	template="/resources/plantillas/plantilla-centro-relevo.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
	xmlns:jsf="http://xmlns.jcp.org/jsf"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<ui:param name="nav" value="/resources/plantillas/navUsuario.xhtml" />


	<ui:define name="principal">
		
		<div>
			<video id="videoID" autoplay="true" ></video>
		</div>
		<div>
			<canvas id="canvasID" ></canvas>
		</div>
		<div>
			<input type="button" value="Take Photo" onclick="capture()" /> 
		</div>
		<script type="text/javascript">
		var video = document.getElementById('videoID');
		var canvas = document.getElementById('canvasID');
		var context = canvas.getContext('2d');
		window.URL = window.URL || window.webkitURL;
		navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia	|| navigator.mozGetUserMedia || navigator.msGetUserMedia;
		navigator.getUserMedia
		(
				{video : true},
				function(stream)
				{
					video.src = window.URL.createObjectURL(stream);
								
				}, 
				function(e) 
				{
					 console.log('Something wrong has happened:', e); 
                }
		);

		
		function capture() 
		{
			context.drawImage(video, 0, 0, canvas.width, canvas.height);
			send();
		};

		
		function send()
        {
			var imageData =  canvas.toDataURL();
			var xmlhttp = new XMLHttpRequest();
			xmlhttp.open("POST", "#{request.contextPath}/receiver", true);
			xmlhttp.send(imageData);
        };
        

	</script>
	
	
	
	<script>



	</script>


	</ui:define>
</ui:composition>
















